<template>
  <div class="content-thinkText">
    <p v-html="htmlthinkText"></p>
  </div>
  <div class="content-container" v-html="htmlValue"></div>
  <div style="height: 50px;"></div>
</template>
<script setup lang="ts">
import {
  renderMarkdownText,
  renderMermaidProcess,
} from "@/utils/plugins/markdown";
import { ref, defineProps, watch, nextTick } from "vue";
const props = defineProps<{ conversationContent: string, thinkText: string }>();
const htmlValue = ref("");
const htmlthinkText = ref("");
let timer = null
const renderContent = (content: string) => {
  clearTimeout(timer)
  timer = setTimeout(async () => {
    await nextTick();
    try {
      htmlValue.value = renderMarkdownText(content);
      renderMermaidProcess();
    } catch (error) {
      console.log(error);
    }
  }, 100);
};






watch(
  () => props.conversationContent,
  (newVal) => {
    if (newVal) {
      renderContent(newVal);
    }
  },
  { immediate: true }
);
watch(
  () => props.thinkText,
  (content) => {
    if (content) {
      htmlthinkText.value = content;
    }
  }, { immediate: true }
);
</script>
<style lang="scss" scoped>
.content-container {
  margin-bottom: 12px;
}
</style>
